// 导航栏滚动效果
const navbar = document.getElementById('navbar');
window.addEventListener('scroll', () => {
    if (window.scrollY > 10) {
        navbar.classList.add('shadow-md');
        navbar.classList.remove('shadow-sm');
    } else {
        navbar.classList.remove('shadow-md');
        navbar.classList.add('shadow-sm');
    }
});

// 移动端菜单切换
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
    if (mobileMenu.classList.contains('h-0')) {
        mobileMenu.classList.remove('h-0');
        mobileMenu.classList.add('h-auto');
        mobileMenuButton.innerHTML = '<i class="fa-solid fa-xmark text-gray-600"></i>';
    } else {
        mobileMenu.classList.add('h-0');
        mobileMenu.classList.remove('h-auto');
        mobileMenuButton.innerHTML = '<i class="fa-solid fa-bars text-gray-600"></i>';
    }
});

// 收藏按钮交互
const favoriteButtons = document.querySelectorAll('.fa-heart');
favoriteButtons.forEach(button => {
    button.addEventListener('click', (e) => {
        e.stopPropagation();
        const icon = button;
        if (icon.classList.contains('fa-regular')) {
            icon.classList.remove('fa-regular');
            icon.classList.add('fa-solid');
            icon.style.color = '#ef4444';
            showToast('已收藏该课程');
        } else {
            icon.classList.remove('fa-solid');
            icon.classList.add('fa-regular');
            icon.style.color = '#6b7280';
            showToast('已取消收藏');
        }
    });
});

// 课程卡片点击事件
const courseCards = document.querySelectorAll('.card-hover');
courseCards.forEach(card => {
    card.addEventListener('click', () => {
        // 这里应该跳转到课程详情页，实际项目中需要替换为真实的跳转逻辑
        showToast('即将进入课程详情页');
    });
});

// 筛选标签点击事件
const filterTags = document.querySelectorAll('.filter-tag');
filterTags.forEach(tag => {
    tag.addEventListener('click', () => {
        // 移除同一组中其他标签的active状态
        const parent = tag.parentElement;
        parent.querySelectorAll('.filter-tag').forEach(t => {
            t.classList.remove('filter-tag-active');
        });
        // 添加当前标签的active状态
        tag.classList.add('filter-tag-active');
    });
});

// 显示提示框
function showToast(message) {
    const toast = document.createElement('div');
    toast.className = 'toast';
    toast.innerHTML = `
        <div class="flex items-center">
            <i class="fa-solid fa-info-circle mr-2"></i>
            <span>${message}</span>
        </div>
    `;
    document.body.appendChild(toast);
    
    // 显示提示框
    setTimeout(() => {
        toast.classList.add('show');
    }, 10);
    
    // 3秒后隐藏提示框
    setTimeout(() => {
        toast.classList.remove('show');
        setTimeout(() => {
            document.body.removeChild(toast);
        }, 300);
    }, 3000);
}